<div class="ti3-swiper-container">
  <!-- 左侧按钮 -->
  <div
    *ngIf="totalPage > 1"
    tiOutline
    class="ti3-swiper-arrow ti3-swiper-prev"
    [ngClass]="{'ti3-swiper-finite-arrow': !loop && currentPage <= 0}"
    tabindex="0"
    (keydown.enter)="onClickPrev()"
    (click)="onClickPrev()"
    [id]="appendId('prev')"
  >
    <ti-icon name="angle-left"></ti-icon>
  </div>

  <!-- 卡片容器 -->
  <div class="ti3-swiper-wrapper" #wrapper>
    <div class="ti3-swiper-cards-container" #cards>
      <ng-content></ng-content>
    </div>
  </div>

  <!-- 右侧按钮 -->
  <div
    *ngIf="totalPage > 1"
    tiOutline
    class="ti3-swiper-next ti3-swiper-arrow"
    [ngClass]="{'ti3-swiper-finite-arrow': !loop && currentPage >= totalPage - 1}"
    tabindex="0"
    (keydown.enter)="onClickNext()"
    (click)="onClickNext()"
    [id]="appendId('next')"
  >
    <ti-icon name="angle-right"></ti-icon>
  </div>
</div>

<!-- 面板指示点 -->
<ul
  *ngIf="totalPage > 1 && indicatorPosition!=='none'"
  class="ti3-swiper-pagination-bullets"
  [id]="appendId('list')"
  [ngClass]="{'ti3-swiper-pagination-bullets-bottom': indicatorPosition==='bottom'}"
>
  <li
    *ngFor="let item of swiperBullets index as i"
    class="ti3-swiper-pagination-bullet"
    [ngClass]="{'ti3-swiper-pagination-bullet-active': i === currentPage}"
    (click)="onClickDot(i)"
  ></li>
</ul>
